<template>
    <view class="con">
        <view class="title">
            {{info.curriculumName}}
        </view>
        <view class="info">
            <view class="info-title">
                <text><u-icon name="info" size="16" color="#034096"></u-icon></text> <text>招生进度</text>
            </view>
            <view class="info-content">
                <view class="content-item">
                    <view class="item-name">
                        报名时间：
                    </view>
                    <view class="item-content">
                        {{info.entryStart}}~ {{info.entryEnd}}
                    </view>
                </view>
                <view class="content-item">
                    <view class="item-name">
                        招生人数：
                    </view>
                    <view class="item-content">
                        {{info.entryNumber}}

                    </view>
                </view>
                <view class="content-item">
                    <view class="item-name">
                        <text>报名状态</text> ：
                    </view>
                    <view class="item-content">
                        {{info.entryFlag=='Y'?'已结束':'报名中'}}
                    </view>
                </view>


            </view>
        </view>
        <view class="info">

            <view class="info-title">
                <text><u-icon name="info" size="16" color="#034096"></u-icon></text> 详细介绍
            </view>
            <rich-text :preview="true" :nodes="formatRichText(info.curriculumCost)"></rich-text>
            <view v-if="false" style="padding: 50rpx;" class="dde" v-html="info.curriculumCost">

            </view>

        </view>
        <view class="buy">
            <!-- <view class="buy-item">
                <text><u-icon name="share-square" size="19" color="#034096"></u-icon></text><text>分享</text>
            </view> -->
            <view class="buy-item" @click="tobaomings">
                <text><u-icon name="info" size="16" color="#034096"></u-icon></text><text>报名</text>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        curriculumdetail
    } from '@/api/home/index.js'
    export default {
        data() {
            return {
                id: '',
                info: {}
            }
        },
        onLoad(val) {
            this.id = val.id
            console.log(val, 22222222);
            this.forms()
        },
        methods: {
            formatRichText(html) { // 富文本内容格式化
                const regex = new RegExp('img', 'gi')
                const str = html.replace(regex, `img style="max-width:100%;"`) // 加上自己所需要的样式
                return str
            },

            onShareAppMessage(res) {
                //console.log('onShareAppMessage',res);
                return {
                    title: '汇考英语',
                    path: `packageA/pages/dingzhi/dingzhi?id=${this.id}`,
                }
            },
            async forms() {
                let res = await curriculumdetail({
                    id: this.id
                })

                this.info = res.data
                // let str = this.info.curriculumCost.replace(/<p\s+class=""/g, '<view class="els"').replace(
                //     /<\/p/g, '</view');

                // console.log(str);
                // this.info.curriculumCost = str


            },
            tobaomings() {
                if (this.info.entryFlag == 'Y') {
                    uni.showToast({
                        title: "报名已结束",
                        icon: "none"
                    })
                    return
                }
                uni.navigateTo({
                    url: `/packageA/pages/canvas/canvas?id=${this.id}`
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // @font-face {
    //     font-family: 'W02';
    //     src: url('https://huikaoyingyuxcx.jishimi.net/assets/W02.ttf');
    // }

    .dde {
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segone UI, Arial, Roboto, 'PingFang SC', 'PingFang-SC', 'Hiragino Sans GB', "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1", sans-serif;
        letter-spacing: 8rpx;
        line-height: 1.8;
        font-weight: 300;

    }

    .dde p {
        padding: 20rpx;
    }

    .els {
        padding: 20rpx;
    }

    .title {
        width: 100%;
        text-align: center;
        padding: 20rpx;
        background-color: $u-bg-color;
        font-size: 32rpx;

    }

    .info {
        margin-top: 20rpx;
        background-color: $u-bg-color;
        padding-bottom: 100rpx;

    }

    .info-title {
        display: flex;
        align-items: center;
        padding: 20rpx 50rpx;
        color: #034096;
        border-bottom: 1px solid #eeeeee;
        font-size: 32rpx;
        margin-bottom: 20rpx;
    }

    .content-item {
        padding: 10rpx 40rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .item-name {
        font-size: 28rpx;
        font-weight: 700;

    }

    .item-content {
        margin-left: 50rpx;
        font-size: 28rpx;
    }

    .buy {
        box-sizing: border-box;
        width: 750rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        background-color: #034096;
        color: #fff;

    }

    .buy-item {
        width: 100%;
        border-right: 1rpx solid #eee;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 30rpx 0 50rpx 0;
        font-size: 32rpx;

    }
</style>